let heredoc = require('heredoc');
let ejs = require('ejs');


exports.search = heredoc(function () {
  /*
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>movie</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<style>
    .title {
        text-align: center;
        font-size: 2.5rem;
        background-color: lightcyan;
        border-radius: 1rem 1rem;
        margin: 0 auto;
    }
    .detail {
        position: relative;
        display: block;
    }
    .middle {

    }
</style>
<body>
<div id="app">
    <h1 class="title"><%= title %></h1>
    <div id='director'></div>
    <div id='poster'></div>
    <div id='carsouler'></div>
    <div id='detail'></div>
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
<script>
  window.onload = function (){
    let url = decodeURIComponent(window.location.href)
    let searchTitle = url.split('?')[1].split('&')[0].split('=')[1]
    $.ajax({
      url: 'https://api.douban.com/v2/movie/search?q=' + searchTitle + '&start=0&count=10',
      type:'get',
      dataType:'jsonp'
    }).then(data=> {
      let arr = data.subjects;
      let actorNames = ''
      console.log(arr)
      let imgArr = [];
      for(let i=0; i<arr.length;i++) {
        imgArr[i] = {}
        imgArr[i].img = arr[i].images.small
      }
      for(let i=0; i<arr[0].casts.length;i++) {
        actorNames = actorNames + arr[0].casts[i].name + ','
      }
      $('#director').html(`
<div class="middle">
    <div>豆瓣评分：${arr[0].rating.average}</div>
    <div>导演：${arr[0].directors[0].name}</div>
    <div>主演：${actorNames}</div>
</div>
`)
      $('#detail').html(`
    <a href="${arr[0].alt}" class="detail"><button type="button" class="btn btn-link">点击进入豆瓣查看更详细介绍</button></a>
`)
      $('#carsouler').html(`
         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="2000">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src=${imgArr[0].img} alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src=${imgArr[1].img} alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src=${imgArr[2].img} alt="Third slide">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
    `)
    })
  }
</script>
</body>
</html>


*/
});
